import React, { Component } from 'react'
import { get, isEmpty } from 'lodash'
import { Card } from 'components/Base'
import {
  RadioGroup,
  RadioButton,
  Loading,
  Columns,
  Column,
} from '@kube-design/components'
import ComponentStore from 'stores/component'
import Card2 from './Card'
import styles from './index.scss'

export default class WorkSheet extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: 'kubesphere',
      sheetList: {
        kubernetes: [
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'kube-controller-manager-svc',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'kube-scheduler-svc',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'coredns',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'metrics-server',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
        ],
        kubesphere: [
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'minio',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'ks-apiserver',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'tower',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'ks-controller-manager',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'ks-console',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'openldap',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
        ],
        istio: [
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'jaeger-query',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'jaeger-collector',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'jaeger-collector-headless',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'kiali',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'istiod-1-11-2',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'jaeger-operator-metrics',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
        ],
        monitoring: [
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'prometheus-operator',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'kube-state-metrics',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'alertmanager-operated',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'node-exporter',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'notification-manager-webhook',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
          {
            imgPath: '/assets/userPlatform/6.png',
            name: 'thanos-ruler-operated',
            namespace: 'dl-workspace',
            startedAt: '2022-12-28',
            channel: 'CPU扩充',
            status: 1,
          },
        ],
      },
    }

    this.configs = this.getConfigs()
    this.store = new ComponentStore()
  }

  get cluster() {
    // return this.props.match.params.cluster
    return 'host'
  }

  getConfigs = () => [
    {
      type: 'kubesphere',
      title: '全部',
    },
    {
      type: 'kubernetes',
      title: '待处理',
    },
    {
      type: 'istio',
      title: '处理中',
    },
    {
      type: 'monitoring',
      title: '已完成',
    },
  ]

  getCount = type => {
    const healthyCount = {
      kubesphere: this.state.sheetList.kubesphere.length,
      kubernetes: this.state.sheetList.kubernetes.length,
      istio: this.state.sheetList.istio.length,
      monitoring: this.state.sheetList.monitoring.length,
    }
    return healthyCount[type] || 0
  }

  getColor = healthy => (healthy ? '#f5a623' : '#55bc8a')

  handleTypeChange = type => {
    this.setState({ type })
  }

  renderBar() {
    return (
      <div className="inline-block" id={styles.radioGroupBox}>
        <RadioGroup
          mode="button"
          value={this.state.type}
          onChange={this.handleTypeChange}
        >
          {this.configs
            .filter(item => !item.disabled)
            .map(({ type, title }) => (
              <RadioButton key={type} value={type}>
                {title}
                <span>({this.getCount(type)})</span>
              </RadioButton>
            ))}
        </RadioGroup>
      </div>
    )
  }

  renderCards(data) {
    return (
      <div className={styles.cards}>
        {data.map(item => (
          <Card2 key={item.name} component={item} cluster={this.cluster} />
        ))}
      </div>
    )
  }

  renderComponents(type) {
    const components = this.state.sheetList[type]

    if (isEmpty(components)) {
      return null
    }

    return (
      <div className={styles.cardsWrapper}>{this.renderCards(components)}</div>
    )
  }

  renderList() {
    const isLoading = false
    const { type } = this.state

    if (isLoading) {
      return (
        <div className="loading">
          <Loading />
        </div>
      )
    }

    return this.renderComponents(type)
  }

  render() {
    return (
      <Card
        className={styles.sheetDetailContainer}
        empty={t('NO_LOG_DATA_FOUND')}
      >
        <div className={styles.sheetTitle}>工单详情</div>
        <Columns>
          <Column className="is-narrow is-12">
            {this.renderBar()}
            {this.renderList()}
          </Column>
        </Columns>
      </Card>
    )
  }
}
